<div class="protected editor">
  <header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-indigo">
      <div class="responsive-submenu">
        <a class="navbar-brand" href="../">
          <img src="../app/img/logo-boostrapmagic.svg" width="24" height="24" alt="logo"> Bootstrap Magic
        </a>
        <span class="navbar-text rs">
          <a href="https://twitter.com/home?status=Bootstrap%20Magic%204.0%20%3A%20Generate%20your%20own%20%23Bootstrap%204.0%20theme%20quickly%20and%20easily%20in%20the%20browser.%20%23bootstrapmagic%20%23angularjs%20https%3A//pikock.github.io/bootstrap-magic/"
            data-text="Bootstrap Magic feat Bootstrap 3.1 : Awesome theme generator with live preview" data-lang="en" data-hashtags="bootstrap, angularjs">
            <img src="../app/img/icn-twitter.svg" width="24" height="24">
          </a>
          <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//pikock.github.io/bootstrap-magic/">
            <img src="../app/img/icn-facebook.svg" width="24" height="24">
          </a>
          <a data-size="medium" href="https://github.com/pikock/bootstrap-magic">
            <img src="../app/img/icn-github-editor.svg" width="24" height="24">
          </a>

        </span>
      </div>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a ng-class="{ 'not-active': show !== 'variables'}" class="nav-link" ng-click="goTo('show', 'variables')">Variables editor</a>
          </li>

          <li class="nav-item">
            <a ng-class="{ 'not-active': show !== 'editorHtml'}" class="nav-link" ng-click="goTo('show', 'editorHtml')">HTML editor</a>
          </li>
        </ul>
      </div>
      <ul class="second-navbar navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link fancy-button is-boring" ng-click="resetSassVariables()">Reset</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fancy-button is-boring" data-toggle="modal" href="#importSassVariables">Import</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fancy-button" data-toggle="modal" href="#saveModal">Save</a>
        </li>
      </ul>
    </nav>
  </header>
</div>


<div class="protected alerts" ng-if="alert">
  <div class="alert alert-danger" role="alert" ng-bind="alert">
    This is a danger alert—check it out!
  </div>
</div>

<div ng-hide="show !== 'variables'">
  <div class="editor protected container-fluid p-0">
    <div class="row m-0">
      <div class="variables-container">
        <div ng-repeat="group in variables">
          <a class="category category-{{ group.slug }}" href="" ng-click="toggle(group)">
            <span ng-bind="group.name"></span>
            <span class="arrow {{ group.hidden ? 'is-left' : 'is-down' }}">></span>
          </a>
          <section class="variables protected" ng-hide="group.hidden">
            <div class="form-group {' ap-color-picker: variable.value': colorpicker(variable.type)}" data-color="{{ color(variable.type, variable.value) }}"
              ng-repeat="variable in group.data">
              <label for="{{variable.key}}" ng-bind="variable.key"></label>
              <div class="input {' ap-color-picker: variable.value': colorpicker(variable.type)} input-group" data-color="{{ color(variable.type, variable.value) }}"
                data-color-format="hex" ng-class="{'input-group color colorpicker' : colorpicker(variable.type)}" color-picker-apply="">
                <input id="{{variable.key}}" type="text" data-ng-model="variable.value" class="sassVariable form-control {{variable.key}} {{$index}}"
                  ng-change="autoApplySass()" ng-model-options="{
                    updateOn: 'default blur',
                    debounce: { 'default': 500, 'blur': 0 }
                  }">
                <span class="reset" ng-click="resetBaseVariable(variable, $event)" ng-if="variable.value !== variable.default">x</span>
                <span class="input-group-addon" ng-class="{ 'hidden' : !colorpicker(variable.type)}">
                  <i></i>
                </span>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
  <div class="protected protectedHtml">
    <div class="blockview is-hidden"></div>
    <div class="preview protected-css">
      <div class="loading" ng-show="loading">
        <div class='box' id="loader">
          <div class='wave -one'></div>
          <div class='wave -two'></div>
          <div class='wave -three'></div>
        </div>
        <h4>Wait for it ...</h4>
      </div>
      <iframe class="fixedPreview" ng-src="{{fixedContent.blobUrl}}" frameborder="0">
      </iframe>
    </div>
  </div>
</div>

<div ng-if="show==='editorHtml'">
  <div class="protected editorHtml">
    <div class="sub-bar bg-indigo">
      <ul class="nav sub-nav">
        <li class="nav-item" ng-hide="subRoute !=='html'">
          <label class="form-check-label">
            <input type="checkbox" ng-model="showHTML" class="form-check-input"> HTML
          </label>
        </li>

        <li class="nav-item" ng-hide="subRoute !=='html'">
          <label class="form-check-label">
            <input type="checkbox" ng-model="showCSS" class="form-check-input"> CSS
          </label>
        </li>
      </ul>
      <ul class="nav main-nav">
        <li class="nav-item">
          <a class="nav-link" ng-class="{ 'active': subRoute==='html' }" ng-click="goTo( 'subRoute', 'html')">HTML/CSS Editor</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" ng-class="{ 'active': subRoute==='preview' }" ng-click="goTo( 'subRoute', 'preview')">Preview</a>
        </li>
        <li class="nav-item">
          <a ng-class="{ 'active': subRoute==='templateHtml' }" class="nav-link" ng-click="goTo( 'subRoute','templateHtml')">Examples</a>
        </li>

      </ul>
    </div>
    <div ng-if="subRoute==='html'">
      <div class="editor-html" ng-if="showHTML" ng-class="{ 'fullsize': showHTML && !showCSS }">
        <h3>HTML</h3>
        <div class="code-mirror is-html" data-template="html" ng-init="codemirrorLoaded( 'html')"></div>
      </div>
      <div class="editor-css" ng-if="showCSS" ng-class="{ 'fullsize': !showHTML && showCSS }">
        <h3>CSS</h3>
        <div class="code-mirror is-css" data-template="css" ng-init="codemirrorLoaded('css')"></div>
      </div>
    </div>
    <div ng-show="subRoute==='templateHtml'">
      <div class="protected templateHtml">
        <div class="row" ng-repeat="group in templates">
          <div class="col-12 text-center" style="padding: 50px 15px;">
            <h3 ng-bind="group.name"></h3>
          </div>

          <div class="col" ng-repeat="template in group.data">
            <div class="card">
              <img class="card-img" ng-src="{{template.image_url}}" alt="{{template.slug}}">
              <div class="card-body">
                <h6 class="card-title text-center" ng-bind="template.name"></h6>
                <p class="card-text" ng-bind="template.description"></p>
                <div class="col text-center mt-4">
                  <a class="fancy-button is-boring" ng-click="chooseTemplate(template)">Start</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div ng-if="subRoute==='preview'">
      <div class="protected previewHtml">
        <iframe ng-src="{{template.blobUrl}}" frameborder="0">
        </iframe>
      </div>
    </div>
  </div>
</div>

<div class="protected">
  <div class="modal fade" id="importSassVariables" tabindex="-1" role="dialog" aria-labelledby="sassVariablesLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <div class="modal-header justify-content-end">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div>

        <div class="modal-body">
          <div class="row">
            <div class="col-12">
              <h4 class="modal-title" id="sassVariablesLabel">
                <span class="apico games apico-cloud-upload"></span>Import your SCSS Variables</h4>
            </div>
          </div>

          <p>Add your SCSS variables to Bootstrap Magic.</p>

          <textarea class="form-control" ng-model="importedVariables" rows="3" placeholder="Example $text-color: #242424;" style="height:400px"></textarea>
        </div>

        <div class="modal-footer">
          <button data-dismiss="modal" aria-hidden="true" class="btn btn-primary" ng-click="importSassVariables(importedVariables)"
            ng-disabled="!importedVariables">Import</button>
        </div>

      </div>
    </div>
  </div>
</div>

<div class="protected">
  <div class="modal fade" id="saveModal" tabindex="-1" role="dialog" aria-labelledby="sassVariablesLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <div class="modal-header justify-content-end">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

        </div>

        <div class="modal-body container-fluid justify-content-center text-center">
          <div class="row">
            <div class="col-12 mb-5">
              <img class="logo" src="../app/img/logo-boostrapmagic.svg" width="57" height="57" alt="logo">
            </div>
          </div>

          <h3>Thanks for using Bootstrap magic!</h3>

          <p class="pl-5 pr-5 pt-1 pb-2">Save your Bootstrap themes in CSS or just the SCSS variables.</p>

          <div class="col">
            <a class="nav-link fancy-button is-boring mr-3" ng-click="saveSassVariables()">Save SCSS variables</a>
            <a class="nav-link fancy-button is-boring" ng-click="saveCSS()">Save CSS</a>
          </div>
        </div>

        <span class="line"></span>

        <div class="modal-footer text-center" style="flex-direction: column;">
          <div class="row">
            <div class="col">
              <h3>Give what you can for Bootstrap Magic!</h3>
              <p>
                To help us keep up the good work on Bootstrap Magic and other side projects for you!
              </p>
              <div class="form-paypal-container">
                
              
              <form target="_blank" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" class="form-paypal">
                  <input type="hidden" name="cmd" value="_s-xclick">
                  <input type="hidden" name="hosted_button_id" value="W8B5H7NPKSZQE">
        <!--           <input type="image" src="https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal, le réflexe sécurité pour payer en ligne">
         -->          <img alt="" border="0" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1">
                  <button href="hidden" class="fancy-button" type="submit" name="submit">5€</button>
                  </form>

                  
                  <form target="_blank" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"  class="form-paypal">
                  <input type="hidden" name="cmd" value="_s-xclick">
                  <input type="hidden" name="hosted_button_id" value="H3F69APZ6RV5E">
        <!--           <input type="image" src="https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal, le réflexe sécurité pour payer en ligne">
         -->          <img alt="" border="0" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1">
         <button href="hidden" class="fancy-button" type="submit" name="submit">10€</button>
                  </form>

                  <form target="_blank" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"  class="form-paypal">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="hosted_button_id" value="HG2F95MNPQ7VA">
        <!-- <input type="image" src="https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal, le réflexe sécurité pour payer en ligne">
         --><img alt="" border="0" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1">
         <button href="hidden" class="fancy-button" type="submit" name="submit">20€</button>

        </form>

                  <form target="_blank" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"  class="form-paypal">
                  <input type="hidden" name="cmd" value="_s-xclick">
                  <input type="hidden" name="hosted_button_id" value="467TSLTBQNPWA">
                  <input type="hidden" src="https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal, le réflexe sécurité pour payer en ligne">
                  <img alt="" border="0" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1">

                  <button href="hidden" class="fancy-button" type="submit" name="submit">Other amount</button>
                  </form>
                </div>

            </div>
          </div>

          
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.form-paypal-container{
  display: flex;
  justify-content: center;
    margin-bottom: 3em;
}
</style>